<template>
  <div>
    <h2>定位页面</h2>
    <div>
      <input type="text" v-model="value" @input="ipt(value)" placeholder="请输入搜索地址" />
    </div>
    <div v-for="item,index in tips" :key="index" @click="upLocation(item)">
        <p>{{item.name}}</p>
    </div>
    <div id="container"></div>
  </div>
</template>

<script>
// import { mapState } from 'vuex';
import { mapMutations } from 'vuex';
import { mapGetters } from 'vuex';
export default {
  name: "location",

  data() {
    return {
      value: "",
      tips:[]
    };
  },
  computed:{
    // ...mapState(['center','name','city'])
    ...mapGetters(['data'])
  },
  mounted() {
    
    let _this=this;
    var center=_this.data.center;
    var map = new AMap.Map("container", {
      zoom: 16, //级别
      center: center, //中心点坐标
      viewMode: "2D", //使用3D视图
    });
    // 创建一个 Marker 实例：
    var marker = new AMap.Marker({
      position: new AMap.LngLat(center[0],center[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      title: _this.data.name,
    });

    // 将创建的点标记添加到已有的地图实例：
    map.add(marker);
    marker.setLabel({
      direction: "top-center",
      // offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
      content: _this.data.title, //设置文本标注内容
    });
  },

  methods: {
    ...mapMutations(['uplocation']),
    ipt(val) {
       this.autoInput(val);
    },
    upLocation(obj){
        this.uplocation(obj);
        this.$router.back()
    },
    // 获取输入提示信息
    autoInput(val){
        var keywords = val;
        var _this=this
        AMap.plugin("AMap.AutoComplete", function () {
          // 实例化Autocomplete
          var autoOptions = {
            city: _this.data.city,
          };
          var autoComplete = new AMap.Autocomplete(autoOptions);
          autoComplete.search(keywords, function (status,result) {
            // 搜索成功时，result即是对应的匹配数据
            console.log('result',result);
            _this.tips=result.tips
          });
        });
    }
  },
};
</script>

<style scoped lang="scss">
#container {
  width: 700px;
  height: 700px;
}
</style>